<template>
  <div id="labTatRules">
    <Breadcrumb content="TAT监控节点设置" />
    <div class="bodyContent">
      <!-- vxe-toolbar -->
      <Splitpanes class="area">
        <Pane size="65">
          <vxe-toolbar perfect>
            <template #buttons>
              <div class="smallToolTitle">节点设置</div>
              <vxe-input clearable placeholder="关键字查询" class="vxeInputSearch" v-model="searchForm.keywords" @search-click="findList" @keyup="keyup" type="search"></vxe-input>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="findList"></vxe-button>
              <vxe-button type="text" class="button-red" icon="vxe-icon-delete" content="删除" @click="handleDelete"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="tableBox">
            <vxe-table border show-overflow keep-source ref="tableRef" :loading="loading" height="auto" :column-config="{ resizable: true }" :row-config="{isCurrent:true}" :data="tatRuleList" @cell-click="tableCellClick">
              <vxe-column type="seq" width="30"></vxe-column>
              <vxe-column field="tatNodeNo" title="编号" width="100px"></vxe-column>
              <vxe-column field="tatNodeNa" title="TAT监控节点名称" min-width="180px"></vxe-column>
              <vxe-column field="nodeStartNa" title="起始节点" :edit-render="{}" width="80px"></vxe-column>
              <vxe-column field="nodeEndNa" title="终止节点" :edit-render="{}" width="80px"></vxe-column>
              <vxe-column field="minTime" title="最小时间" :edit-render="{}" align="center" width="80px">
                <template #edit="{ row }">
                  <vxe-input v-model="row.minNum" type="number"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="maxTime" title="最大时间" :edit-render="{}" align="center" width="80px">
                <template #edit="{ row }">
                  <vxe-input v-model="row.maxNum" type="number"></vxe-input>
                </template>
              </vxe-column>
              <vxe-colgroup title="提醒时间" align="center">
                <vxe-column field="prewarnTime" title="预警" :edit-render="{}" align="center" width="100px">
                  <template #edit="{ row }">
                    <vxe-input v-model="row.preWarnTime" type="number"></vxe-input>
                  </template>
                </vxe-column>
                <vxe-column field="warnTime" title="警告" :edit-render="{}" align="center" width="100px">
                  <template #edit="{ row }">
                    <vxe-input v-model="row.warnTime" type="number"></vxe-input>
                  </template>
                </vxe-column>
              </vxe-colgroup>
            </vxe-table>
          </div>
        </Pane>

        <Pane size="35">
          <el-tabs type="border-card">
            <el-tab-pane label="属性信息">
              <LabTatNodesForm ref="LabTatNodesFormRef" :currentRow="{}" @findList="findList" />
            </el-tab-pane>
            <ExtraPropertyPanel :busRow="curSlectRow" />
          </el-tabs>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========src\views\lab_sys\bac_set\BacGermDict.vue
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VXETable, VxeTableInstance, VxeTablePropTypes, VxeTableEvents } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import XEClipboard from 'xe-clipboard';
import LabTatNodesForm from './LabTatNodesForm.vue'; //基本信息表单组件
import ExtraPropertyPanel from '@/components/ExtraPropertyPanel.vue';
import { isEmpty } from 'lodash';
import { AppStore } from '@/stores/store';
import { copyFileSync } from 'fs';
let store = AppStore();
// 全局变量定义区 ==========

let { proxy }: any = getCurrentInstance();

// 获取屏幕宽度
let conWidth = ref(document.documentElement.clientWidth);

// 页面标题
let content = ref('TAT时间规则设置');
// 用户输入关键字
const searchForm = reactive({
  keywords: ''
});
// 加载中 loading效果状态
let loading = ref(false);/**加载中 */
let showLoading = ref(false); //刷新
let saveLoading = ref(false); //保存
const LabTatNodesFormRef = ref(null);/**表单对象 */
const tableRef = ref(null); //表格ref标记
const refUnqualifiedReason = ref<InstanceType<typeof refUnqualifiedReason>>(); //属性信息表单标记ref
let currentRow: any = reactive({ id: '', code: '' }); //基本信息表单当前行数据
// 模块功能表格数据
let tatRuleList: any = reactive([]);

const curSlectRow = ref({});
//**判断为空*/
let IsEmpty = (value: any) => {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
};

// 方法定义区 =============
onMounted(() => {
  findList();
});

// 表格选中当前行
function tableCellClick({ row }: any) {

  Object.assign(currentRow, row);
  LabTatNodesFormRef.value?.initPage(row);
  proxy.$forceUpdate();
}

function findList() {
  loading.value = true;
  tatRuleList.length = 0; //放入数据前清空数据
  const url = '/api/lab-tat-node/findLabTatNodeList';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { keyWords: searchForm.keywords } })
    .then(async (res: any) => {
      tatRuleList.push(...res.data);
      loading.value = false;
      if (res && res.data && res.data.length > 0) {
        tableCellClick({ row: res.data[0] });
        const $table = tableRef.value;
        if ($table) {
          currentRow.id = '';
          await $table.setCurrentRow(res.data[0]);
        }
      }
    })
    .catch((err: any) => {
      loading.value = false;
      VxeMessage('获取列表数据异常', VxeNotifyType.error);
    });
}

// 新增
function handleAdd() {
  const $formRef = refUnqualifiedReason.value;
  refUnqualifiedReason.value.addNew();
}

//保存
function saveList() {
  const $formRef = refUnqualifiedReason.value;
  refUnqualifiedReason.value.saveForm();
}

// 删除
function handleDelete() {
  const row = tableRef.value?.getCurrentRecord();
  if (!row && IsEmpty(row.id)) {
    VxeMessage('请选择要删除的数据', VxeNotifyType.info);
  } else {
    proxy.$confirm('确定要删除选中的数据？', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const url = '/api/lab-tat-node/deleteLabTatNode';
      proxy.$http
        .post(url, row)
        .then((res: any) => {
          VxeMessage(res.status.msg, VxeNotifyType.success);
          findList();
        })
        .catch((err: any) => {
          VxeMessage(err, VxeNotifyType.error);
        });
    }).catch((err: any) => {
      //todo
    });
  }
}

/**查询 */
function search() {
  //todo
}
/**键盘按键事件 */
function keyup() {
  //todo
}
</script>
<style lang="scss" scoped>
#labTatRules {
  width: 100%;
  height: 100%;

  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);

    .area {
      background-color: $base-white;

      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }

      .tableBox {
        height: calc(100% - 40px);
      }

      .el-tabs--border-card {
        border: none;
        height: 100%;

        :deep(.el-tabs__content) {
          height: calc(100% - 39px - 30px);
          margin: 5px 5px !important;
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
  }
}
:deep(.el-tabs__content) {
  padding: 0 !important;
}

:deep(.el-row) {
  margin-left: 0 !important;
  margin-right: 0px !important;
}
</style>
